<script setup>
// import { reactive, computed } from "vue";
import todoTop from "./components/TodoTop.vue";
import todoList from "./components/TodoList.vue";


// let infor = ref("");

// let list = reactive(JSON.parse(localStorage.getItem("list")));

// const add = function () {
//   const obj = {
//     id: new Date().getTime(),
//     text: infor.value,
//     checked: false,
//   };
//   list.push(obj);
//   localStorage.setItem("list" ,JSON.stringify(list) );
//   infor.value = "";
// };

// list = localStorage.getItem("list") || [];
// console.log(localStorage.getItem("list"));
// const toogle = function (id) {
//   // console.log(id);
//   const index = list.findIndex((item) => item.id === id);
//   list[index].checked = !list[index].checked;
//   localStorage.setItem("list" , JSON.stringify(list) );
// };
// // const wei = computed(() => {
// //   return list.filter((item) => !item.checked);
// // });
// const wei = computed(() => {
//   return list.filter((item) => item.checked === false);
// });

// const yi = computed(() => {
//   return list.filter((item) => item.checked === true);
// });

// const del = function (id) {
//   const i = list.findIndex((item) => item.id === id);
//   list.splice(i, 1);
// };
</script>

<template>
  <div class="todolist-box">
    <todo-top @add="add"></todo-top>
    <todo-list></todo-list>
  </div>
</template>

<style scoped>

</style>
